<template>
    <view>
        <view v-if="metadata.options.ctlType=='label'">
            <div class="x-radio-label">
                <span :class="[readOnly?'x-radio-span-readOnly':'x-radio-span']" @click="radioLabel(item.value)" :style="curValue==item.value?styleName(item.value):''" v-for="item of getOptions()" :key="item.value">{{ item.label }}</span>
            </div>
        </view>
        <uni-data-checkbox
            v-else
            v-model="curValue"
            :multiple="false"
            :localdata="getOptions()"
            :map="{text:'label',value:'value'}"
            @change="radioChange"
            :disabled="readOnly"
            :mode="mode"
        ></uni-data-checkbox>
    </view>
</template>

<script>
/**
 * 单选
 */
import MForm from "../js/MForm";
import BaseComplex from "../js/BaseComplex";

export default {
    name: "MRadio",
    mixins: [MForm, BaseComplex],
    data() {
        return {
            curValue: ""
        }
    },
    computed: {
        valMode() {
            //单双值
            return this.metadata.options.valMode || "single";
        },
        mode(){
            //不用button 用tag模式
            return this.metadata.options.ctlType == "default" ? "default" : "tag";
        }
    },
    created() {
        let self_ = this;
        this.initDataSource(function () {
            self_.initCurValue(true);
        });
    },
    methods: {
        initCurValue(isInit) {
            let valMode = this.valMode;
            let val = this.value || "";
            if (val) {
                if (valMode == "double") {
                    if (!val.includes('{') && !val.includes('}') && isInit) {
                        let options = this.getOptions();
                        let option = options.find(item => item.value === val);
                        if (option) {
                            let {label, value} = option;
                            val = JSON.stringify({label, value});
                            this.updateValue(val);
                            //触发初始化事件
                            this.executeInitCustomQuery(val);
                            this.curValue = JSON.parse(val).value;
                        } else {
                            this.curValue = "";
                        }
                    } else {
                        this.curValue = JSON.parse(val).value;
                    }
                } else {
                    this.curValue = val;
                }
                if(!isInit){
                    //处理自定义查询关联字段
                    this.handFieldMapping(this.curValue);
                }
            }
        },
        radioChange(e) {
            let val = e.detail.value;
            this.setValue(val);
        },
        radioLabel(val){
            if(this.readOnly){
                return
            }
            this.setValue(val);
        },
        setValue(val) {
            let valMode = this.valMode;
            let _val = val;
            if (valMode == "single") {
                //如果是单值;
                this.setData(_val);
            } else if (valMode == "double") {
                //双值;
                let json = {label: "", value: ""};
                let _options = this.getOptions();
                if (_options.length <= 0) {
                    return
                }
                _options.forEach((item) => {
                    if (item.value == _val) {
                        json.label = item.label;
                        json.value = _val;
                    }
                })
                json = JSON.stringify(json);
                if (val == "") {
                    this.setData("");
                } else {
                    this.setData(json);
                }
            }
        },
        styleName(value){
            if(!this.metadata.options.labelConfig && !this.metadata.options.labelConfig.bgcolor){
                return
            }
            let labelConfig = this.metadata.options.labelConfig;
            let style = {}
            if(labelConfig.borderStyle){
                style = labelConfig.borderStyle
            }
            style['background'] = labelConfig.bgcolor;
            style['color'] = labelConfig.fgcolor;
            return style

        },
    },
    watch: {
        value: function () {
            this.initCurValue();
        },
        options: {
            handler(val) {
                if (val) {
                    this.initCurValue(true);
                }
            },
            deep: true
        }
    },
}
</script>

<style scoped>
.x-radio-label{
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 8px;
}
.x-radio-span{
    padding: 2px 10px;
    cursor: pointer;
    border-radius: 5px;
    background: #F5F6F9;
}
.x-radio-span-readOnly{
    padding: 2px 10px;
    cursor: pointer;
    border-radius: 5px;
    background: #F5F6F9;
    color: rgba(0, 0, 0, 0.25);
}
</style>
